<template>
    <div style="display: flex; justify-content: center; background-color: #fff;">
        <div style="width: 755px">
            <div style="border: 1px solid #cccccc;">
                <div>
                    <div
                        style="padding-left: 30px; font-size: 18px; font-weight: 800;height: 50px; line-height: 50px;background-color: #FBFBFB;">
                        更改个人信息</div>
                    <div style="display: flex; justify-content: center;">
                        <div class="bty-login-content">
                            <input type="text" style="width: 200px;" v-model="userInfo.username" disabled>
                            <span>用户名 *：</span>
                            <div style="margin-bottom: 20px;">
                                <br>
                            </div>
                            <input type="text" style="width: 200px;" v-model="userInfo.email">
                            <span>邮箱 *：</span>
                            <div style="margin-bottom: 20px;">
                                <br>
                            </div>
                            <input type="text" style="width: 200px;" v-model="userInfo.tel">
                            <span>电话 *：</span>
                            <div style="margin-bottom: 20px;">
                                <br>
                            </div>
                            <input type="text" style="width: 200px;" v-model="userInfo.province">
                            <span>省份 *：</span>
                            <div style="margin-bottom: 20px;">
                                <br>
                            </div>
                            <input type="text" style="width: 200px;" v-model="userInfo.city">
                            <span>市 *：</span>
                            <div style="margin-bottom: 20px;">
                                <br>
                            </div>
                            <input type="text" style="width: 200px;" v-model="userInfo.county">
                            <span>区/县/街道 *：</span>
                            <div style="margin-bottom: 20px;">
                                <br>
                            </div>
                            <input type="text" style="width: 200px;" v-model="userInfo.detail">
                            <span>详细地址 *：</span>
                            <div style="margin-bottom: 20px;">
                                <br>
                            </div>
                            <input type="text" style="width: 200px;" v-model="userInfo.verify">
                            <span>校验码 *：</span>
                        </div>
                    </div>
                    <div style="height: 40px; height: 50px; text-align: center;">
                        <VerificationCode />
                    </div>
                    <div style="text-align: center;margin-bottom: 10px;">
                        <el-button type="primary" round @click="subRegister">确认修改</el-button>
                    </div>

                </div>
                <div></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { getUserInfo, updateUserInfo } from "../requests/index";
import VerificationCode from '../views/VerificationCode.vue';
import { ElMessage } from 'element-plus';

const router = useRouter();
const userInfo = reactive({
    id: "",
    username: '',
    tel: '',
    email: '',
    province: "",
    city: "",
    county: "",
    detail: "",
});

const forUserInfo = async () => {
    const res = await getUserInfo();
    if (res.status === 2000) {
        const data = res.data;
        userInfo.id = data.id;
        userInfo.username = data.username;
        userInfo.tel = data.tel;
        userInfo.email = data.email;
        userInfo.province = data.province;
        userInfo.city = data.city;
        userInfo.county = data.county;
        userInfo.detail = data.detail;
    } else {
        console.log("用户未登录")
    }
};
forUserInfo();


const subRegister = async()=>{
    const verify = window.localStorage.getItem("verify");
    if (verify !== userInfo.verify ) {
        ElMessage.error("验证码错误");
        return;
    };
    const res = await updateUserInfo(userInfo);
    if (res.status === 2000){
        ElMessage.success("更新成功");
    }else{
        ElMessage.error("更新失败");
    }
}
</script>

<style scoped>
:deep(.el-input__inner) {
    border: 1px solid #e9eef3;
}

.bty-login-content {
    margin-top: 20px;
}

.bty-login-content>span,
input {
    float: right;
}

.bty-login-note {
    text-align: center;
    margin-bottom: 50px;
}
</style>